<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<title>JSX</title>
</head>
<body>
<a href="https://cn.vuejs.org/v2/guide/render-function.html#JSX">学习地址</a>
	<div id="app"></div>
</body>
</html>
<script type="text/javascript">
// 简单组件
var AnchoredHeading=Vue.component('AnchoredHeading', {
		template:"<h1>Hello World 1</h1>"
});
// 带参数组件
var AnchoredHeadingB=Vue.component('AnchoredHeadingB', {
  render: function (createElement) {
    return createElement('h' + this.level, this.$slots.default)
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
});

new Vue({
  el: '#app',
  render: function (h) {
    return h(AnchoredHeading)
  },
  render: function (createElement) {
  	return createElement('h2' ,"HelloWorld2")
  },
  // 可能呢需要Bable 插件才可以
  //  render: function (h) {
  //   return (
  //     '<AnchoredHeadingB level={1}>Hello world!</AnchoredHeadingB>'
  //   )
  // }
})
</script>